'use client'

import { useState } from 'react'
import { VmsCourse } from '@/types/Model'
import { Card, CardHeader } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Calendar, BookOpen, Users, Eye, Share2, Edit } from 'lucide-react'
import moment from 'moment'
import { toast } from '@/hooks/use-toast'
import { useRouter } from 'next/navigation'
import CourseEditDialog from './CourseEditDialog'

interface CourseInfoProps {
  course: VmsCourse
  sectionsCount: number
  onCourseUpdated?: (updatedCourse: VmsCourse) => void
}

export default function CourseInfo({ course, sectionsCount, onCourseUpdated }: CourseInfoProps) {
  const router = useRouter()
  const [showEditDialog, setShowEditDialog] = useState(false)
  const [currentCourse, setCurrentCourse] = useState(course)

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'draft':
        return 'bg-slate-100 text-slate-700 border-slate-200'
      case 'published':
        return 'bg-green-50 text-green-700 border-green-200'
      case 'archived':
        return 'bg-rose-50 text-rose-700 border-rose-200'
      default:
        return 'bg-slate-100 text-slate-700 border-slate-200'
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case 'draft': return '草稿'
      case 'published': return '已发布'
      case 'archived': return '已归档'
      default: return status
    }
  }

  const handleCourseUpdated = (updatedCourse: VmsCourse) => {
    setCurrentCourse(updatedCourse)
    onCourseUpdated?.(updatedCourse)
  }

  return (
    <>
      <Card className="border-slate-200/50 shadow-sm bg-white/80 backdrop-blur-sm">
        <CardHeader>
          <div className="flex justify-between items-start">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                <h1 className="text-3xl font-bold text-slate-900">{currentCourse.title}</h1>
                <Badge className={`${getStatusColor(currentCourse.status)} text-sm font-medium border`}>
                  {getStatusText(currentCourse.status)}
                </Badge>
              </div>
              {currentCourse.description && (
                <p className="text-slate-600 text-lg mb-4">{currentCourse.description}</p>
              )}
              
              <div className="flex flex-wrap gap-6 text-sm text-slate-500">
                <div className="flex items-center gap-2">
                  <Calendar className="h-4 w-4" />
                  <span>创建于 {moment(currentCourse.created_at).format('YYYY-MM-DD')}</span>
                </div>
                <div className="flex items-center gap-2">
                  <BookOpen className="h-4 w-4" />
                  <span>{sectionsCount} 个小节</span>
                </div>
                <div className="flex items-center gap-2">
                  <Users className="h-4 w-4" />
                  <span>{currentCourse.participant_count} 参与者</span>
                </div>
                <div className="flex items-center gap-2">
                  <Eye className="h-4 w-4" />
                  <span>{currentCourse.view_count} 次访问</span>
                </div>
              </div>
            </div>
            
            <div className="flex gap-2">
              <Button
                variant="outline"
                onClick={() => setShowEditDialog(true)}
              >
                <Edit className="h-4 w-4 mr-2" />
                编辑课程
              </Button>
              <Button
                variant="outline"
                onClick={() => {
                  const shareUrl = `${window.location.origin}/course/${currentCourse.access_token}`
                  navigator.clipboard.writeText(shareUrl)
                  window.open(`/course/${currentCourse.access_token}`, '_blank')
                  toast({
                    title: '分享链接已复制',
                    description: '课程分享链接已复制到剪贴板'
                  })
                }}
              >
                <Share2 className="h-4 w-4 mr-2" />
                课程主页
              </Button>
            </div>
          </div>
        </CardHeader>
      </Card>

      <CourseEditDialog
        course={currentCourse}
        open={showEditDialog}
        onOpenChange={setShowEditDialog}
        onCourseUpdated={handleCourseUpdated}
      />
    </>
  )
}